<template>
  <div class="box">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <div :class="[activeIndex == index?'active':'','itemBox']" v-for="(item,index) in languageList" :key="index" @click="setActiveIndex(item,index)">
       <div class="contentddd">
		   <img :src="item.guojiaImg" alt="">
		   <p>{{ item.text }}</p>
		   </div>
		<img src="../../assets/images/newImg/youjiantou.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "switchLanguage",
  components: { navBar },
  data() {
    return {
      account: "",
      password: "",
      navBar: {
        back: true,
        title: this.$t("语言选择"),
        close: false,
        btn: "",
      },
      activeIndex: localStorage.getItem('langIndex')?localStorage.getItem('langIndex'):3,
      // languageList: [this.$t("中文简体"),this.$t("中文繁體"),this.$t("English"),this.$t("日本語"),this.$t("ViệtNam"),this.$t("한국어"),this.$t("ไทย"),this.$t("Deutsche"),this.$t("français"),this.$t("Español"),this.$t("Pусский"),this.$t("Português"),this.$t("Беларуская")],
      languageList: [
		  {
		    label: this.$t("中文简体"),
		    value: 'zh',
		    text: "中文简体",
			guojiaImg: require('../../assets/images/newImg/zh_cn.png'),
		  },
        {
          label: this.$t("中文繁體"),
          value: 'hk',
          text: "中文繁體",
		  guojiaImg: require('../../assets/images/newImg/ft.png'),
        },{
          label: this.$t("한국어"),
          value: 'kr',
          text: "한국어",
		  guojiaImg: require('../../assets/images/newImg/kr.png'),
        },{
          label: this.$t("日本語"),
          value: 'jp',
          text: "日本語",
		  guojiaImg: require('../../assets/images/newImg/jp.png'),
        },{
          label: this.$t("English"),
          value: 'en',
          text: "English",
		  guojiaImg: require('../../assets/images/newImg/en.png'),
        },{
          label: this.$t("ViệtNam"),
          value: 'vn',
          text: "ViệtNam",
		  guojiaImg: require('../../assets/images/newImg/vn.png'),
        },{
          label: this.$t("ltalian"),
          value: 'lta',
          text: "ltalian",
		  guojiaImg: require('../../assets/images/newImg/lta.png'),
        },{
          label: this.$t("Spanish"),
          value: 'es',
          text: "Spanish",
		  guojiaImg: require('../../assets/images/newImg/es.png'),
        }
      ],
    };
  },
  mounted() {},
  methods: {
    // 切换语言
    setActiveIndex(item, index){
      this.activeIndex = index;
      localStorage.setItem('lang', item.value);
      localStorage.setItem('langName', item.text);
      localStorage.setItem('langIndex', index);
      this.$i18n.locale = item.value;
      this.$toast(this.$t('设置成功'));
      setTimeout(() => {
        this.$router.go(-1);
      }, 600)
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  left: 0px;
  top: 0;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  background-color: #21212b;
  .content {
    padding: 0 10px 0px 15px;
    width: 95%;
    position: absolute;
    left: 50%;
	transform: translateX(-50%);
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
	background-color: #262633;
	border-radius: 5px;
	height: auto;
    -webkit-overflow-scrolling: touch;

    .itemBox {
      box-sizing: border-box;
	  margin: 10px 0 20px 0px;
	  display: flex;align-items: center;
	  justify-content: space-between;
	  .contentddd{
	  	display: flex;align-items: center;
		img{
				  width: 30px;
				  height: 30px;
				  margin-right: 8px;
				  border-radius: 50%;
		}
	  }
      p {
        color: #fff;
        font-size: 14px;
      }
	 &>img{
		  width: 18px;
		  height: 18px;
	  }
      &.active {
        p {
          color: #fff;
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>